@import '~styles/colors.less';

.empty {
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: all 0.2s ease-out;
  background-color: transparent;
  border: 1px solid transparent;

  .emptyContent {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-60%);
  }

  .title {
    color: @adminText;
    font-size: 36px;
    font-weight: 300;
  }
  .text {
    color: @adminText;
    font-size: 16px;
    margin-bottom: 20px;
  }
}

.items {
  width: 250px;
  padding-top: 32px;
  padding-bottom: 32px;
}

.dropIcon {
  font-size: 40px;
  color: @dropSuccess;
}

.active {
  background-color: @dropSuccessBack;
  border: 1px solid @dropSuccess;
  border-radius: 2px;
}

.removeArea {
  position: absolute;
  top: 45%;
  right: 0;

  display: inline-block;
  width: 34px;
  height: 34px;
  text-align: center;
}

.removeIcon {
  color: @alert;
  font-size: 26px;

  display: inline-block;
  width: 34px;
  height: 34px;
  transition: transform 0.2s ease-out;
}

.isActive {
  transform: scale(1.3);
}
